<template>
  <div class="note-section">
    <div class="note-section-title">
      {{section.name}}
      <ri class="right" i="add" @click="$emit('add-note', section.id)"></ri>
    </div>
    <div class="note-list" :class="'note-kind-' + section.id">
      <note-card
        v-for="n in filteredNotes"
        :key="n.id"
        :note="n"
        @removed="$emit('note-removed', $event)"
      ></note-card>
    </div>
  </div>
</template>

<script>
import NoteCard from "./NoteCard.vue";
export default {
  props: ["notes", "section"],
  components: {
    NoteCard
  },
  computed: {
    filteredNotes() {
      return this.notes.filter(n => n.scope == this.section.scope && n.section == this.section.id);
    }
  }
}
</script>